<template>
  <view class="zl-tabbar">
    <view :style="'height:' + height + 'px'"></view>
    <view class="tabbar-foot" id="foot">
      <view
        class="tabbar-page-footer"
        id="target"
        :class="{ round: shape == 'round' }"
      >
        <view
          class="tabbar-item"
          :class="{
            'main-style': item.jut,
            'tabbar-select': modelValue == index,
          }"
          v-for="(item, index) in tabbarItem"
          :key="item.key"
          @click="changeIndex(index, item)"
        >
          <view class="isDot" v-if="item.isDot"></view>
          <view class="badge" v-else-if="item.value">
            {{ item.value }}
          </view>
          <slot :name="item.key">
            <view class="flex" v-if="item.img">
              <image class="tabbar-img" :src="item.img" />
            </view>
            <view
              v-else-if="item.icon"
              class="flex iconfont"
              :class="item.icon"
            >
            </view>
            <text class="text-style">{{ item.label }}</text>
          </slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  /**
   *
   * shape：round为悬浮样式，default：基础样式
   * active：选中的内容，tabbarItem中的key是什么，active对应的就是什么
   *
   */
  props: {
    tabbarItem: {
      type: Array,
      default: [],
    },
    modelValue: {
      type: Number,
      default: 0,
    },
    shape: {
      type: String,
      default: "default",
    },
    active: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      height: 50,
    };
  },
  created() {
    uni.hideTabBar();
    this.getTabbarHeight();
  },
  methods: {
    changeIndex(index, item) {
      if (index != this.modelValue) {
        this.$emit("update:modelValue", index);
        this.$emit("change", index, item);
      }
    },
    getTabbarHeight() {
      let that = this;
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(".tabbar-foot")
          .boundingClientRect((data) => {
            console.log(data);
            that.height = data?.height || 50;
            this.$emit("height", that.height);
          })
          .exec();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabbar-foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: visible;
  z-index: 10;
  left: 0;
  right: 0;
}

.footer-bg {
  position: absolute;
  width: 100%;
  // height: 98rpx;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid #f3f3f3;
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
  box-shadow: 0px 0px 12rpx -4rpx rgba(206, 206, 206, 0.32);
  box-sizing: border-box;
}

.tabbar-page-footer {
  position: relative;
  z-index: 999;
  display: flex;
  overflow: visible;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  text-align: center;
  // height: 98rpx;
  font-size: 26rpx;
  padding: 20rpx;
  box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
  // height: calc(98rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  // height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  background-color: #fff;
  padding-bottom: calc(
    20rpx + constant(safe-area-inset-bottom)
  ); ///兼容 IOS<11.2/
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

  &.round {
    margin: 0 30rpx;
    border-radius: 100rpx;
    margin-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    margin-bottom: calc(30rpx + env(safe-area-inset-bottom));
  }

  .tabbar-item {
    // width: calc(750rpx / 5);
    flex: 1;
    text-align: center;
    overflow: visible;
    position: relative;
    .isDot {
      position: absolute;
      background-color: red;
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      top: -10%;
      right: 20%;
      border: 4rpx solid #fff;
      z-index: 1;
    }
    .badge {
      position: absolute;
      background-color: red;
      right: 0;
      top: -20%;
      font-size: 20rpx;
      min-height: 10rpx;
      min-width: 10rpx;
      border-radius: 20rpx;
      padding: 0 10rpx;
      color: #fff;
      z-index: 1;
      border: 4rpx solid #fff;
    }
  }

  .text-style {
    font-size: 24rpx;
    text-align: center;
    overflow: visible;
    font-weight: 400;
  }

  .tabbar-select {
    // background: linear-gradient(137.83deg, rgba(255, 230, 140, 1), rgba(220, 170, 90, 1));
    // -webkit-background-clip: text;
    // background-clip: text;
    // color: transparent;
    // font-size: 30rpx;
    color: rgba(220, 170, 90, 1);
  }

  .total {
    position: absolute;
    background-color: red;
    color: #fff;
    font-size: 20rpx;
    min-width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
  }

  .flex {
    display: flex;
    align-items: center;
    overflow: visible;
    justify-content: center;
    // padding: 16rpx 0 6rpx;
    // padding-bottom: 6rpx;
    &.iconfont {
      font-size: 40rpx;
      width: 40rpx;
      height: 40rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
    }
  }

  .tabbar-img {
    width: 40rpx;
    height: 40rpx;
    overflow: visible;
    display: block;
  }
  .main-style {
    box-shadow: rgba(0, 0, 0, 0.25) 0px -7px 9px -6px;
    box-shadow: 0px -12rpx 10px -4rpx rgba(206, 206, 206, 0.32);
    position: relative;
    margin-top: -80rpx;
    border-radius: 50%;
    background: #fff;
    width: 180rpx;
    // height: 138rpx;
    font-size: 24rpx;
    overflow: visible;
    padding: 1rpx;
    .flex {
      padding-bottom: 4rpx;
    }
    .tabbar-img {
      width: 80rpx;
      height: 80rpx;
      margin-top: 16rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    // .text-style {
    //   font-size: 24rpx;
    // }
  }
}
</style>
